<template>
	<div class="body">
		<el-card class="myForm">
			<div slot="header" class="clearfix">
				<h3>用户登录</h3>
			</div>
			<el-form :model="user" ref="myForm" :rules="rules" :label-width="labelWidth">
				<el-form-item prop="username" label="用户名:">
					<el-input placeholder="请输入用户名" v-model="user.username" clearable></el-input>
				</el-form-item>
				<el-form-item prop="password" label="密码:">
					<el-input placeholder="请输入密码" v-model="user.password" show-password></el-input>
				</el-form-item>
				<el-form-item style="text-align: right;">
					<el-button type="primary" icon="el-icon-check" @click="login">登录</el-button>
					<el-button type="info" icon="el-icon-refresh-left" @click="exit">重置</el-button> 
				</el-form-item>
			</el-form>
		</el-card>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				user: {
					username:'',
					password:''
				},
				rules:{
					username:[{required:true,message:'用户名不能为空',trigger:'blur'}],
					password:[{required:true,message:'密码不能为空',trigger:'blur'}]
				},
				labelWidth:'80px'
			}
		},
		methods:{
			login(){
				this.$refs.myForm.validate(valid=>{
					if(valid){
						this.$ajax.post('login',this.user).then(res=>{
							var result=res.data;
							// console.log(result);
							if(result.success){
								var token=result.data.token;
								var name=result.data.name;
								var roles=result.data.roles;
								sessionStorage.setItem("token",token);
								sessionStorage.setItem("name",name);
								sessionStorage.setItem("isLogined",true);
								sessionStorage.setItem("roles",roles);
								// sessionStorage.setItem("path",'/course/manage');
								if(roles.indexOf("ROLE_ADMIN")>-1){
									this.$router.replace("/course/manage");
								}else{
									this.$router.replace("/myGrade");
								}
							}else{
								this.$message.error(result.msg);
							}
						})
					}
				})
			},
			exit(){
				this.$refs.myForm.resetFields();
			}
		}
	}
	
</script>

<style scoped>
	.body {
		height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.myForm {
		width: 25rem;
		
	}
	.myForm h3 {
		text-align: center;
	}
</style>
